<template>
<div class="">
    <el-steps :active="1" simple>
        <el-step title="编辑课程" icon="el-icon-edit"></el-step>
        <el-step title="创建章节" icon="el-icon-upload"></el-step>
        <el-step title="添加成功" icon="el-icon-user"></el-step>
    </el-steps>
    <div class="bodyFrom">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- 课程标题 -->
  <el-form-item label="课程标题" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
  <!-- 课程分类 -->
  <el-form-item label="课程分类" prop="sort">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="Python" name="type"></el-checkbox>
      <el-checkbox label="Java" name="type"></el-checkbox>
      <el-checkbox label="JavaScript" name="type"></el-checkbox>
      <el-checkbox label="PHP" name="type"></el-checkbox>
      <el-checkbox label="C\C++" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <!-- 课程时长 -->
  <el-form-item label="课程时长" prop="time">
    <el-input v-model="ruleForm.time"></el-input>
  </el-form-item>
  <!-- 课程讲师 -->
  <el-form-item label="课程讲师" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <!-- 课程价格 -->
  <el-form-item label="课程价格" prop="price">
    <el-input v-model="ruleForm.price"></el-input>
  </el-form-item>
  <!-- 课程简介 -->
  <el-form-item label="课程简介" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存下一步</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</div>
</template>
<script>
   export default {
    data() {
      return {
        ruleForm: {
          name: '',
          title: "",
          time: "",
          sort: "",
          type: [],
          desc: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入课程标题', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
           name: [
            { required: true, message: '请输入课程讲师', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          sort: [
            { type: 'array', required: true, message: '请至少选择一个课程分类', trigger: 'change' }
          ],
          time: [
            { required: true, message: '请输入课程时长', trigger: 'blur' }
          ],
           price: [
            { required: true, message: '请输入课程价格', trigger: 'blur' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
.bodyFrom{
    width: 800px;
    padding: 80px;
    margin-left: 200px;
}
</style>